<template>
  <div>
    <div class="list-page flex-column">
      <SearchLine @search="search" @add="showAddDialog" />
      <ListTable class="flex-1 overflow-auto" :tableList="tableList" @handelBtn="handelTableBtn" />
      <DetailDialog :dialogVisible.sync="dialogVisible" :detail="memberDetail" @submit="submit" :title="title" :type="dialogType"/>
      <AlertDialog :dialogVisible.sync="alertVisible" :detail="alertMessage" @submit="sureDel" :title="title"  />
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Provide, Vue } from 'vue-property-decorator'
import SearchLine from '@/components/SearchLine.vue'
import ListTable from '@/components/ListTable.vue'
import DetailDialog from '@/components/DetailDialog.vue'
import AlertDialog from '@/components/Alert.vue'
import * as api from '@/api'
import { message } from '@/utils/components'

/**
 * @Component 注解
 *    包含components属性，将组件SearchLine传递传递到父类的Vue的属性中
 */

@Component({
  components: {
    SearchLine,
    ListTable,
    DetailDialog,
    AlertDialog
  },
})
export default class List extends Vue {
  @Provide() tableList: Array<object> = []
  @Provide() dialogVisible: boolean = false
  @Provide() alertVisible: boolean = false
  @Provide() memberDetail: any = {
    phone: '',
    name: '',
    balance: 0,
    direction: 1,
    amount: '',
  }
  @Provide() title: string = '新增'
  @Provide() dialogType: string = 'add'
  @Provide() alertMessage: string = ''
  @Provide() delPhone: string = ''

  created() {
    this.search()
  }

  search(value?: string | undefined) {
    api.getList({ phone: value }).then((res: any) => {
      this.tableList = res.data
    })
  }

  handelTableBtn(obj: any) {
    if (obj.type === 'recharge' || obj.type === 'deduction') {
      this.dialogVisible = true
      this.title = '资金划转'
      this.dialogType = 'edit'
      this.memberDetail = {
        phone: obj.item.phone,
        name: obj.item.name,
        balance: obj.item.amount,
        amount: '',
        direction: obj.type === 'recharge' ? 1 : 2,
      }

      return
    }
    if (obj.type === 'recording') {
      this.$router.push({ name: 'Recording', query: { phone: obj.item.phone } })
      return
    }
    if (obj.type === 'del') {
      this.delPhone = obj.item.phone
      this.alertVisible = true
      this.alertMessage = `确认删除 ${this.delPhone} 吗？删除后不可恢复！`
      return
    }
  }

  sureDel() {
    this.alertVisible = false
    api.delItem({ phone: this.delPhone }).then((res) => {
      message('删除成功')
      this.search()
    })
  }

  showAddDialog() {
    this.dialogVisible = true
    this.title = '新增'
    this.dialogType = 'add'
    this.$set(this, 'memberDetail', {
      phone: '',
      name: '',
      balance: 0,
      direction: 1,
      amount: '',
    })
  }

  submit() {
    let phoneReg = /^[1][0-9]{10}$/
    if (!phoneReg.test(this.memberDetail.phone)) {
      message('请输入正确的手机号', 'err')
      return
    }
    if (!this.memberDetail.name) {
      message('请输入姓名', 'err')
      return
    }
    let numberReg = /^[0-9]+(\.[0-9]*)?$/
    if (!numberReg.test(this.memberDetail.amount)) {
      message('请输入正确的金额', 'err')
      return
    }

    if (this.dialogType === 'add') {
      api.addItem(this.memberDetail).then((res) => {
        message('添加成功')
        this.dialogVisible = false
        this.search()
      })
    } else {
      api.updateItem(this.memberDetail).then((res) => {
        message(this.memberDetail.direction === 1 ? '充值成功' : '扣款成功')
        this.dialogVisible = false
        this.search()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.list-page {
  margin: 20px auto;
  padding: 20px;
  width: 1300px;
  height: calc(100% - 40px);
  background: #fff;
}
</style>
